<template>
	<view>
		<u-navbar placeholder fixed autoBack title="考勤打卡"><!-- <view slot="right" class="d-font-32" style="color: #ADB4BD;" @click="makeCard">申请补卡</view> --></u-navbar>

		<view class="d-p-30 user d-flex">
			<view class="d-flex-1">
				<view class="d-flex">
					<view class="d-font-32" style="color: #151C24;font-weight: bold;">{{ xm }}</view>
					<view class="d-font-32 d-m-l-50" style="color: #5D6672;">{{ xb }}</view>
					<view class="d-m-l-50">
						<u-button
							text="切换人员"
							size="mini"
							shape="circle"
							:customStyle="{
								color: '#21A5F3',
								borderColor: '#21A5F3'
							}"
							@click="search"
						></u-button>
					</view>
				</view>
				<view class="d-font-28 d-m-t-20" style="color: #5D6672;">
					<view>
						<text>证件号码</text>
						<text class="d-m-l-20">{{ zjhm }}</text>
					</view>
					<!-- <view class="d-m-t-10 d-flex" @click="showDatetime = true">
						<text>打卡时间</text>
						<text class="d-m-l-20 d-m-r-20">{{ dtime }}</text>
						<u-icon name="clock" size="28rpx" color="#5D6672"></u-icon>
					</view> -->
					<view class="d-m-t-10 d-flex">
						<text>所属班组</text>
						<text class="d-m-l-20 d-m-r-20">{{ this.$user.ssgcxx[this.$appIndex].bzmc }}</text>
					</view>
				</view>
			</view>
			<view><view @click="signAuth" class="d-font-36 d-flex sign d-row-center" style="color: #FFFFFF;font-weight: bold;" :class="!status ? 'dis' : ''">打卡</view></view>
		</view>
		<view v-if="info" class="d-p-30">
			<view class="d-flex d-data">
				<view class="d-flex-1 item" :class="status == 1 ? 'sel' : ''" @click="setStatus(1)">
					<view class="d-font-28 t" style="font-weight: bold;">上班时间 {{ info[0].amworkon }}</view>
					<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-if="info[0].zzjcsj">打卡时间 {{ $moment(info[0].zzjcsj).format('HH:mm') }}</view>
					<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-else>未打卡</view>
				</view>
				<view class="d-flex-1 item d-m-l-30" :class="status == 2 ? 'sel' : ''" @click="setStatus(2)">
					<view class="d-font-28 t" style="font-weight: bold;">下班时间 {{ info[0].pmworkoff }}</view>
					<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-if="info[0].zwccsj">打卡时间 {{ $moment(info[0].zwccsj).format('HH:mm') }}</view>
					<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-else>未打卡</view>
				</view>
			</view>
		</view>

		<view class="d-p-30">
			<view class="d-flex">
				<text class="d-font-36 d-flex-1" style="font-weight: bold;">考勤汇总</text>
				<!-- <text class="d-font-28" style="color: #ADB4BD;">查看详情</text> -->
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex">
					<text class="d-font-32" style="font-weight: bold;">当前月份</text>
					<text class="d-font-36 d-m-l-20 d-flex-1" style="font-weight: bold;">{{ nowDate || '' }}</text>
					<view @click="show.showDate = true" class="d-font-24 d-flex d-row-center d-col-center" style="color: #505355;">
						<text class="d-m-r-20">{{ selDate || '' }}</text>
						<u-icon style="position: relative;top: 4rpx;" name="arrow-down" size="24rpx" color="#DFDFDF"></u-icon>
					</view>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.day : 0 }}</text>
							<text class="d-font-20">天</text>
						</view>
						<text class="d-font-24">考勤天数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.atdStaffs : 0 }}</text>
							<text class="d-font-20">天</text>
						</view>
						<text class="d-font-24">出勤天数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.unatdStaffs : 0 }}</text>
							<text class="d-font-20">天</text>
						</view>
						<text class="d-font-24">异常天数</text>
					</view>
				</view>
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">考勤统计</text></view>

			<view class="card d-m-t-30 d-p-30">
				<!-- https://ext.dcloud.net.cn/plugin?id=1795 -->
				<calendar ref="calendar" :headerBar="false" :disabledAfter="true" :collapsible="false" :markDays="markDays" @onDayClick="onDayClick"></calendar>
				<!-- 异常点击到补卡 带上点击的日期 -->
				<view class="d-flex d-font-24" style="color: #ADB4BD;">
					<view class="d-flex-1"></view>
					<view class="tag"></view>
					<view class="d-m-l-20"><text>正常出勤</text></view>
					<view class="tag2"></view>
					<view class="d-m-l-20"><text>考勤异常</text></view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-font-32 d-text-center " style="color: #5D6672;font-weight: bold;">{{ xm }}的进出场明细</view>
				<view class="d-text-center d-font-24 d-m-b-30" style="color: #5D6672;font-weight: bold;">{{ nowDataYMD }}</view>
				<view class="table d-text-center">
					<view class="tr">
						<view class="th">考勤规则</view>
						<view class="th">状态</view>
						<view class="th">考勤时间</view>
						<view class="th">操作</view>
					</view>
					<view class="tr" v-for="(item, index) in list" :key="index">
						<view class="td">{{ item.gzdksj }}</view>
						<view class="td">{{ item.status == 1 ? '入场' : '出场' }}</view>
						<view class="td">{{ item.dksj ? $moment(item.dksj).format('hh:mm') : '' }}</view>
						<view class="td">
							<text class="d-m-r-10" style="color: #21A5F3;" v-if="item.ywbh" @click="bkinfo(item.ywbh)">查看</text>
							<text class="d-m-r-10" style="color: #21A5F3;" v-if="item.image" @click="vPhoto(item.image)">预览</text>
							<text style="color: #21A5F3;" v-if="!item.dksj" @click="makeCard(item)">补卡</text>
						</view>
					</view>
				</view>
				<template v-if="!list || list.length <= 0">
					<view class="d-p-t-30"><u-empty text="暂无记录" icon="/static/image/none.png"></u-empty></view>
				</template>
			</view>
		</view>
		<u-datetime-picker
			mode="year-month"
			:show="show.showDate"
			@cancel="show.showDate = false"
			@confirm="setYM"
			:maxDate="maxDate"
			closeOnClickOverlay
			:value="selDate"
		></u-datetime-picker>
		<u-datetime-picker
			mode="datetime"
			:show="showDatetime"
			@cancel="showDatetime = false"
			@confirm="setDtime"
			:maxDate="maxDate"
			closeOnClickOverlay
			:value="dtime"
		></u-datetime-picker>
	</view>
</template>

<script>
import calendar from './calendar.vue';
import { getPsatd, getAtd, getDkDate, makeUpCard, getStaffInfo } from '../../../common/api.js';
export default {
	components: {
		calendar
	},
	data() {
		return {
			rybh: null,
			xm: null,
			xb: null,
			zjhm: null,
			dtime: null,
			stime: null,
			show: {
				showDate: false
			},
			markDays: [], // 标记
			maxDate: null, // 最大可选时间
			nowDate: null, // 当前年月
			selDate: null, // 查询的月份
			psatd: null, // 考勤汇总
			showDatetime: false,
			item: null,

			status: null,
			info: null,
			nowDataYMD: null,
			list: []
		};
	},
	onLoad(e) {
		this.nowDataYMD = this.$moment().format('YYYY-MM-DD');
		if (!e.id) {
			// 如果没有人员编号 传自己
			this.rybh = this.$user.ssgcxx[this.$appIndex].rybh;
			getStaffInfo({
				id: this.$user.ssgcxx[this.$appIndex].rybh
			}).then(e => {
				this.xm = e.data.xm;
				this.xb = e.data.xb;
				this.zjhm = e.data.zjhm;
				this.itme = e.data;
				this.init();
			});
		} else {
			this.rybh = e.id;
			this.xm = e.xm;
			this.xb = e.xb;
			this.zjhm = e.zjhm;
			this.item = e;
		}

		this.maxDate = new Date().getTime();
		this.nowDate = this.$moment().format('YYYY-MM');
		this.dtime = this.$moment().format('YYYY.MM.DD HH:mm');
		this.selDate = this.nowDate;
	},
	onUnload() {
		uni.removeStorageSync('item');
	},
	onShow() {
		let e = uni.getStorageSync('item');
		if (e) {
			this.rybh = e.id;
			this.xm = e.xm;
			this.xb = e.xb;
			this.zjhm = e.zjhm;
			this.item = e;
		}
		if (this.rybh) {
			// this.nowDataYMD = this.$moment().format('YYYY-MM-DD');
			this.init();
		}
	},
	methods: {
		init() {
			this.getPsatd();
		},
		getPsatd() {
			getDkDate({
				params: {
					gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
					bzid: this.$user.ssgcxx[this.$appIndex].bzid,
					rybh: this.rybh
				}
			})
				.then(e => {
					if (!e.data || e.data.length == 0) {
						let app = this.$user.ssgcxx[this.$appIndex];
						uni.$u.toast('【' + app.gcmc + '】-【' + app.bzmc + '】未设置考勤规则，无法打卡；');
					} else {
						this.info = e.data;
						if (!this.info[0].zzjcsj) {
							this.setStatus(1);
						} else if (!this.info[0].zwccsj) {
							this.setStatus(2);
						}
					}
				})
				.catch(e => {
					console.error(e);
					uni.$u.toast('接口错误!');
				});

			this.getAtd();
			// 考勤汇总 查询 按天
			getPsatd({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid,
					rybh: this.rybh, // 人员 ID
					kqrq: this.selDate
				}
			}).then(e => {
				this.psatd = e.data;
			});
			this.getDayData();
		},
		getAtd() {
			// 考勤统计 当月
			getAtd({
				params: {
					rybh: this.rybh, // 人员id
					kqrq: this.stime || this.$moment().format('YYYY-MM-DD')
				}
			}).then(e => {
				this.markDays = e.data;
			});
		},
		setYM(e) {
			// 时间搜索
			this.selDate = uni.$u.timeFormat(e.value, 'yyyy-mm');
			this.show.showDate = false;
			this.stime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
			this.$refs.calendar.changYearMonth(uni.$u.timeFormat(e.value, 'yyyy'), Number(uni.$u.timeFormat(e.value, 'mm')));
			this.getPsatd();
		},
		setDtime(e) {
			this.showDatetime = false;
			this.dtime = this.$moment(e.value).format('YYYY.MM.DD HH:mm');
		},
		makeCard(e) {
			uni.$u.route({
				url: '/pages/index/work/makeCard',
				params: {
					...this.item,
					bksj: this.nowDataYMD + ' ' + e.gzdksj + ':00',
					bklx: e.status
				}
			});
		},
		setStatus(e) {
			if (e == 1) {
				if (!this.info[0].zzjcsj) {
					this.status = 1;
				} else {
					uni.$u.toast('该时间已打过卡了');
				}
			} else {
				if (!this.info[0].zwccsj) {
					this.status = 2;
				} else {
					uni.$u.toast('该时间已打过卡了');
				}
			}
		},
		onDayClick(e) {
			this.nowDataYMD = e.response.date;
			this.getDayData();
		},
		getDayData() {
			makeUpCard({
				rybh: this.rybh,
				bksj: this.nowDataYMD,
				gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
				bzid: this.$user.ssgcxx[this.$appIndex].bzid
			}).then(e => {
				this.list = e.data;
			});
		},
		signAuth() {
			if (!this.status) {
				if (!this.info) {
					let app = this.$user.ssgcxx[this.$appIndex];
					return uni.$u.toast('【' + app.gcmc + '】-【' + app.bzmc + '】未设置考勤规则，无法打卡；');
				}
				return uni.$u.toast('请选择打卡时间');
			}
			uni.$u.route({
				url: '/pages/index/work/signAuth',
				params: {
					status: this.status,
					rybh: this.rybh,
					gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
				}
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/work/search',
				params: {
					all: true
				}
			});
		},
		vPhoto(e) {
			if (!e) {
				return uni.$u.toast('暂无可预览图片');
			}
			uni.previewImage({
				count: e,
				urls: [e]
			});
		},
		bkinfo(id) {
			uni.$u.route({
				url: '/pages/index/work/bkinfo',
				params: {
					id
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.user {
		background-color: #ffffff;
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);

		.sign {
			width: 160rpx;
			height: 160rpx;
			background: linear-gradient(140deg, #47bbff 0%, #21a5f3 100%);
			box-shadow: 0rpx 3rpx 20rpx rgba(33, 165, 243, 0.4);
			border-radius: 50%;
			opacity: 1;
			&.dis {
				background: #b6babc;
				box-shadow: 0rpx 3rpx 20rpx rgba($color: #b6babc, $alpha: 0.4);
			}
		}
	}
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;

		.tag {
			width: 28rpx;
			height: 28rpx;
			background: #21a5f3;
			border-radius: 50%;
		}
		.tag2 {
			width: 28rpx;
			height: 28rpx;
			background: #e94343;
			border-radius: 50%;
			margin-left: 50rpx;
		}
	}
	.d-data {
		.item {
			height: 143rpx;
			background: #f6f7f8;
			border-radius: 10rpx;
			padding: 30rpx 0 0 30rpx;
			box-sizing: border-box;
			.d {
				color: #adb4bd;
			}
			.t {
				color: #162233;
			}
			&.sel {
				background-color: #21a5f3;
				.d {
					color: #ffffff;
				}
				.t {
					color: #ffffff;
				}
			}
		}
	}

	.table {
		font-size: 28rpx;
		display: table;
		width: 100%;
		vertical-align: middle;
		border: 1px solid #f6f7f8;
		.tr {
			display: table-row;
			.th,
			.td {
				display: table-cell;
				height: 80rpx;
				vertical-align: middle;
			}
			.th {
				font-weight: bold;
				color: #162233;
			}
			&:nth-child(2n-1) {
				background-color: #f6f7f8;
			}
		}
	}
}
</style>
